@(article: (String,String,String,List[String],Int))(implicit lang:Lang,flash:Flash,request:Request[_])

@import play.api.cache._
@import util._
@import play.api.Play.current
@moreScript = { <script src="@routes.Assets.at("javascripts/epiceditor.min.js")"></script> 
                <script type="text/javascript">
                $(document).ready(function(){
				 var opts = {
				  container: 'epiceditor',
				  textarea: "content",
				  basePath: '',
				  clientSideStorage: true,
				  localStorageName: 'epiceditor',
				  file: {
				    name: 'epiceditor',
				    autoSave: 100
				  },
				  theme: {
				    base: '@routes.Assets.at("stylesheets/epiceditor.css")',
				    preview: '@routes.Assets.at("stylesheets/github.css")',
				    editor: '@routes.Assets.at("stylesheets/epic-dark.css")'
				  },
				  button: false,
				  focusOnLoad: false,
				  string: {
				    togglePreview: '@Messages("article.new.togglePreview")',
				    toggleEdit: '@Messages("article.new.toggleEdit")',
				    toggleFullscreen: '@Messages("article.new.toggleFullscreen")'
				  },
				  autogrow: true,
				  autogrow:{
				    minHeight:150
				  }
				}
				var editor = new EpicEditor(opts).load();
                editor.preview();
                
                    $("#alert_delete").hide();
                	$("#cancel_delete").click(function(){
                	  $("#alert_delete").hide();
                	});
                	
                	$("#article_delete").click(function(){
                	  $("#alert_delete").show();
                });
               });
   			</script>
            }
            
@main(article._1,moreScript) {
	<div class="row">
	 	<div class="col-md-9">
	 	   <div class="blog-post">
 		    <h2 class="blog-post-title"> @article._1 </h2>
 		    <hr/>
 		    <p class="blog-post-meta"> @article._2 
 		    @if(request.session.get(util.Constants.User).isDefined){
 		       &nbsp; &nbsp;<a class="glyphicon glyphicon-edit" href="@routes.Blogs.update(article._5)"></a>
 		       &nbsp; &nbsp;<a id="article_delete" class="glyphicon glyphicon-remove"></a>
 		     }
 		    </p>
 		    <div id="alert_delete" style="display:none">
 		      <a class="btn btn-block btn-lg btn-danger" href="@routes.Blogs.delete(article._5)">@Messages("article.delete.ok")</a>
 		      <a id="cancel_delete" class="btn btn-block btn-lg btn-info">@Messages("article.delete.cancel")</a>
 		    </div>
 		    <hr/>
 		    <div>
 		     @article._4.map {tag =>
 			 	<a class="btn btn-lg btn-info" href="@routes.Blogs.tag(tag, 1)" style="font-size: 10px;">@tag</a>
 		     }
 		    </div>
 		    <div> 
 		    	<textarea id="content" name="content" style="display:none">@article._3</textarea>
       			 <div id="epiceditor"></div>
 		    </div>
 		   </div>
 		</div>		
		
		<div class="col-md-3">
		@right()
 		</div>

 		 
	</div>
}

